<template>
  <div style="font-size: 16px;font-weight: 600;">
    <el-radio></el-radio>观众信息
  </div>
  <el-form :inline="true" :model="state.dataForm" @keyup.enter="queryData()" style="margin-top: 10px;"
    @contextmenu.prevent="handleContextMenu" class="unselectable">
    <el-row>
      <!--请选择展会-->
      <el-form-item>
        <el-select placeholder="请选择展会" v-model="state.dataForm.tid2" clearable filterable style="width: 200px;"
          @change="handleTemplateChange">
          <el-option v-for="option in templates" :key="option.id" :label="option.template"
            :value="option.id"></el-option>
        </el-select>
      </el-form-item>
      <!--请选择分组-->
      <el-form-item>
        <el-select placeholder="请选择分组" v-model="state.dataForm.gid" clearable :disabled="!isExhibitionSelected"
          style="width: 120px">
          <el-option v-for="option in groupList" :key="option.id" :label="option.groupName"
            :value="option.id"></el-option>
        </el-select>
      </el-form-item>
      <!--请选择来源-->
      <el-form-item>
        <el-select placeholder="请选择来源" v-model="state.dataForm.ly" filterable clearable
          :disabled="!isExhibitionSelected">
          <el-option v-for="option in state.lys" :key="option.id" :label="option.remark" :value="option.ly">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item>
        <el-input placeholder="手机号" v-model="state.dataForm.col1" clearable></el-input>
      </el-form-item>
      <!-- 公司名称 -->
      <el-form-item>
        <el-input placeholder="公司名称" v-model="state.dataForm.col2" clearable></el-input>
      </el-form-item>
      <!-- 姓名-->
      <el-form-item>
        <el-input placeholder="姓名" v-model="state.dataForm.col3" clearable></el-input>
      </el-form-item>
      <!-- 身份证号-->
      <el-form-item>
        <el-input placeholder="身份证号" v-model="state.dataForm.col56" clearable></el-input>
      </el-form-item>
      <!--请选择历史展会-->
      <el-form-item>
        <el-select placeholder="请选择历史展会" clearable filterable style="width: 200px;" v-model="state.dataForm.historyTid"
          @change="handleHistoryTemplateChange">
          <el-option v-for="option in history" :key="option.id" :label="option.template" :value="option.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 请选择审核状态 -->
      <el-form-item v-if="showAuditButton">
        <el-select placeholder="请选择状态" clearable filterable v-model="state.dataForm.col70" style="width: 120px;">
          <el-option v-for="option in state.col70Options" :value="option.id" :label="option.value"></el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item>
        <el-date-picker type="date" placeholder="开始时间" style="width: 120px"
          v-model="state.dataForm.startTime"></el-date-picker>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-date-picker type="date" placeholder="结束时间" style="width: 120px"
          v-model="state.dataForm.endTime"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="是否到场" clearable style="width: 100px;" v-model="state.dataForm.isSign">
          <el-option v-for="option in state.statusOptions" :value="option.id" :label="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="是否团队" clearable style="width: 100px;" v-model="state.dataForm.col55">
          <el-option v-for="option in state.statusOptions" :value="option.id" :label="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select placeholder="是否预登记" clearable style="width: 120px;" v-model="state.dataForm.col15">
          <el-option v-for="option in state.statusOptions" :value="option.id" :label="option.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
          <el-input placeholder="备注" clearable style="width: 100px" v-model="state.dataForm.col10"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="主营产品【多个关键字A|B|C】" clearable style="width: 210px"
          v-model="state.dataForm.zhuying"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="采购意向【多个关键字A|B|C】" clearable style="width: 210px"
          v-model="state.dataForm.caigou"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="state.dataForm.notIn">不包含</el-checkbox>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item v-if="state.hasPermission('audience:information:info')">
        <el-button type="primary" @click="queryData">{{ $t("query") }}</el-button>
      </el-form-item>
      <!-- 现场办证-->
      <el-form-item v-if="state.hasPermission('audience:information:entrydocuments')">
        <el-button :disabled="!isExhibitionSelected" @click="aduience( state.dataForm.exhibitionName,state.dataForm.tid)">现场办证</el-button>
      </el-form-item>
      <!-- 门票种类 -->
      <el-form-item v-if="showAuditButton">
        <el-select placeholder="门票种类" clearable style="width: 100px;" v-model="state.dataForm.col65">
          <el-option v-for="option in state.col65Options" :value="option.id" :label="option.value"></el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <!-- 全选 -->
    <el-form-item v-if="state.hasPermission('audience:information:join')">
      <el-checkbox v-model="state.dataForm.checkAll" @change="chanckAll">全选 </el-checkbox>
    </el-form-item>
    <!-- 加入回访 -->
    <el-form-item v-if="state.hasPermission('audience:information:join')">
      <el-button :disabled="!(hasSelected || state.dataForm.checkAll)" @click="JoinOrUpdateHandle()">加入回访</el-button>
    </el-form-item>
    <!-- 移除回访 -->
    <el-form-item v-if="state.hasPermission('audience:information:remove')">
      <el-button :disabled="!(hasSelected || state.dataForm.checkAll)" @click="RemoveOrUpdateHandle()">移除回访</el-button>
    </el-form-item>
    <!--身份校验 -->
    <el-form-item v-if="state.hasPermission('audience:information:identitycard')">
      <el-button  @click="getidentitycard()" :disabled="!isExhibitionSelected">身份证号校验</el-button>
    </el-form-item>
    <!-- 修改-->
    <el-form-item v-if="state.hasPermission('audience:information:update')">
      <el-button :disabled="!canUpdate" @click="UpdateHandle()">修改</el-button>
    </el-form-item>
    <!-- 删除 -->
    <el-form-item v-if="state.hasPermission('audience:information:delete')">
      <el-button  :disabled="!hasSelected " type="danger" @click="state.deleteHandle()">删除</el-button>
    </el-form-item>
    <!-- 预登记加入收藏夹-->
    <el-form-item v-if="state.hasPermission('audience:information:joincollect')">
      <el-select placeholder="请选择收藏夹" v-model="state.dataForm.dfvId" filterable clearable
        :disabled="!isExhibitionSelected">
        <el-option v-for="role in collectList" :key="role.id" :label="role.dfvName" :value="role.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="state.hasPermission('audience:information:joincollect')">
      <el-button :disabled="!state.dataForm.dfvId">预登记加入收藏夹</el-button>
    </el-form-item>
    <!--专业观众审核 -->
    <el-form-item v-if="showAuditButton && state.hasPermission('audience:information:examine')">
      <el-button :disabled="!canUpdate" @click="examineHandle()">专业观众审核</el-button>
    </el-form-item>
    <!-- 报名总数 -->
    <el-form-item v-if="state.hasPermission('audience:information:totalnumber')">
      <el-text>报名总数: {{ state.total }}</el-text>
    </el-form-item>
    <!--报名成功数-->
    <el-form-item v-if="state.hasPermission('audience:information:registrationsigned')">
      <el-text>报名成功数: {{ state.bmCount }}</el-text>
    </el-form-item>
    <!--已签到数  -->
    <el-form-item v-if="state.hasPermission('audience:information:registrationsigned')">
      <el-text>已签到数: {{ state.signCount }}</el-text>
    </el-form-item>
    <!--到场总数  -->
    <el-form-item v-if="state.hasPermission('audience:information:totalnumber')">
      <el-text>到场总数: {{ state.dcCount }}</el-text>
    </el-form-item>
    <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
      v-loading="state.dataListLoading" :data="state.dataList" border
      @selection-change="state.dataListSelectionChangeHandle">
      <el-table-column type="selection" v-if="showSelectionColumn"></el-table-column>
      <el-table-column v-if="columns" v-for="column in columns" :label="column.label" :prop="column.colName" :fixed="column.fixed"
        :formatter="column.formatter" :width="column.width" show-overflow-tooltip>
        <template #default="{ row }" v-if="column.colName === 'col70'">
          <template v-if="row.col70 === null || row.col70 === undefined || row.col70 === ''"></template>
          <el-tag v-if="row.col70 === '0'" type="warning">未支付</el-tag>
          <el-tag v-if="row.col70 === '2'" type="danger">已退款</el-tag>
          <el-tag v-if="row.col70 === '3'" type="warning">未审核</el-tag>
          <el-tag v-else-if="row.col70 === '5'" type="danger">审核未通过</el-tag>
          <el-tag v-else-if="row.col70 === '1'" type="success">已支付</el-tag>
          <el-tag v-else-if="row.col70 === '4'" type="success">审核通过</el-tag>
        </template>
        <template #default="{ row }" v-if="column.colName === 'col65'">
          <span v-if="row.col65 === '0'" type="danger">专业观众</span>
          <span v-if="row.col65 === '1'" type="danger">单人票</span>
          <span v-if="row.col65 === '2'" type="danger">双人票</span>
        </template>
        <template #default="{ row }" v-if="column.colName === 'col23'">
          <a :href="row.col23" :target="'_blank'">{{ row.col23 }}</a>
        </template>
        <template #default="{ row }" v-if="column.colName === 'col1'">
          <span>{{ maskPhoneNumber(row.col1) }}</span>
        </template>
        <template #default="{ row }" v-if="column.colName === 'col56'">
          <span>{{ identitycard(row.col56) }}</span>
        </template>
        <template #default="{ row }" v-if="column.colName === 'isBlackList'">
          <span>{{ row.isBlackList == '1' ? '是' : '否' }}</span>
        </template>
        <template #default="{ row }" v-if="column.colName === 'col15'">
          <span v-if="row.col15 !== null && row.col15 !== undefined && row.col15.toString().trim() !== ''">
            {{ row.col15.toString() === '1' ? '是' : '否' }}
          </span>
        </template>
        <template #default="{ row }" v-if="column.colName === 'col55'">
          <span v-if="row.col55 && row.col55.trim() !== ''">是</span>
        </template>
        <template #default="{ row }" v-if="column.colName === 'isSign'">
          <el-tag v-if="row.isSign !== null && row.isSign !== undefined && row.isSign.toString().trim() !== ''
            && row.isSign.toString() === '1'" type="success"> 是
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-pagination :current-page="state.page" :page-sizes="[15, 30, 50, 100]" :page-size="state.limit"
    :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
    @current-change="state.pageCurrentChangeHandle"> </el-pagination>
  <!-- 弹窗加入任务 -->
  <JoinTasks :key="join" ref="joinOrUpdateRef" @refreshDataList="state.getDataList"
    :psnIdList='state.dataForm.psnIdList'>
  </JoinTasks>
  <!-- 弹窗移除任务 -->
  <RemoveTasks :key="remove" ref="RemoveOrUpdaeRef" @refreshDataList="state.getDataList"
    :psnIdList='state.dataForm.psnIdList'></RemoveTasks>
  <!-- 修改 -->
  <update :key="update" ref="UpdateRef" @refreshDataList="state.getDataList"></update>
  <!-- 审核 -->
  <examine :key="examine" ref="examineRef" @refreshDataList="state.getDataList"></examine>
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { computed, nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import JoinTasks from "./join-followup-task.vue";
import RemoveTasks from "./remove-followup-task.vue";
import Update from "./audience-information-add-or-update.vue";
import Examine from "./examine.vue";
const emits = defineEmits(['sendExhibitionId']);
const view = reactive({
  getDataListURL: '/noc/nocmember/page',
  createdIsNeed: false,
  getDataListIsPage: true,
  deleteURL: "/noc/nocmember",
  deleteIsBatch: true,
  exportURL: "",
  daterange: null,
  dataForm: {
    exhibitionName:"",
    tid: "" as any,
    tid2: "" as any,
    gid: "",
    dfvId: null,
    checkAll: false as any,
    ly: "",
    isSign: "",
    col1: "",//手机号
    col2: "",//公司名称
    col3: "",//姓名
    col12: "",
    col13: "",
    col10:"",//备注
    col15: null as any,//是否vip
    col55: "",
    col56: "",//身份证
    col65: "",
    col70: null as any,
    startTime: "",
    endTime: "",
    zhuying: "",
    caigou: "",
    notIn: false,
    psnIdList: '' as any,
    historyTid: "" as any
  },
  limit: 15,
  col70Options: [
    {
      id: 0,
      value: '未支付'
    },
    {
      id: 1,
      value: '已支付'
    },
    {
      id: 2,
      value: '已退款'
    },
    {
      id: 3,
      value: '未审核'
    },
    {
      id: 4,
      value: '审核通过'
    },
    {
      id: 5,
      value: '审核不通过'
    }
  ],
  col65Options: [
    { id: 0, value: "专业观众" },
    { id: 1, value: "单人票" },
    { id: 2, value: "双人票" }
  ],
  statusOptions: [
    { id: 1, value: '是' },
    { id: 0, value: '否' },
  ],
  //total: 0,
  signCount: 0,
  bmCount: 0,
  dcCount: 0,
  lys: null as any,
  lylist: '',
  dataListSelections: [] as any[], // 用于存储选中行的数据
  dataListSelectionChangeHandle: (selection: any[]) => {
    dataListSelectionChangeHandle(selection, state);
  }

});

// 手机号做脱敏
const maskPhoneNumber = (phone: string) => {
  if (!phone) return '';
  const prefix = phone.slice(0, 3);
  const suffix = phone.slice(-3);
  return `${prefix}*****${suffix}`

};

// 身份证号做脱敏
const identitycard = (id: string) => {
  if (!id) {
    return '';
  }
  // 提取前6位和后4位，中间8位用星号填充
  return id.slice(0, 6) + '********' + id.slice(-4);
};


/**
 * 禁止右键
 * @param event
 */
const handleContextMenu = (event: any) => {
  event.preventDefault();
};

// 用于跟踪展会是否被选择
const isExhibitionSelected = ref(false);

// 定义 dataListSelectionChangeHandle 函数
const dataListSelectionChangeHandle = (selection: any[], state: any) => {
  state.dataListSelections = selection;
};
// 定义一个计算属性，用于控制“修改”按钮的禁用状态
const canUpdate = computed(() => view.dataListSelections.length >= 1);

// 添加计算属性判断是否有选中项
const hasSelected = computed(() => state.dataListSelections.length > 0);

// 控制选择列的显示与隐藏
const showSelectionColumn = ref(false)

// 点击全选按钮
const chanckAll = () => {
  state.multiple = !state.dataForm.checkAll
}

//跳转
const router = useRouter();
const aduience = (exhibitionName:any,tid:any) => {
  router.push({
    path: "/noc/entry-credentials",
    query: {
      tid:state.dataForm.tid,
      exhibitionName: state.dataForm.exhibitionName
    }
  });
};

//初始化

const init = () => {
  getTemplates();
  getGroup();
  getCollectList();
  getHistory()

};

//身份校验
const getidentitycard = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  const targetId = ids;
  const tid = state.dataForm.tid;
  const url = `noc/nocmember/identityCheck/${tid}/${targetId}`;
  return baseService.put(url).then((res) => {
    ElMessage.success('身份证号校验成功');
    state.getDataList();
  });
};


// 生成通用的前置列
const generatePreColumns = (includePaymentStatus: boolean) => {
  const basePreColumns = [
    { label: 'id', colName: 'id', index: 'id', width: 80, key: true, formatter: null,fixed: 'left'},
    { label: '签到', colName: 'isSign', index: 'is_sign', width: 60, formatter: null ,fixed: 'left'},
    { label: '来源', colName: 'lyRemark', index: 'lyRemark', width: 80, formatter: null ,fixed: 'left'}
  ];
  if (includePaymentStatus) {
    return [
      { label: 'id', colName: 'id', index: 'id', width: 80, key: true, formatter: null ,fixed: 'left'},
      { label: '支付状态', colName: 'col70', index: 'col70', width: 110, formatter: null ,fixed: 'left'},
      { label: '门票种类', colName: 'col65', index: 'col65', width: 110, formatter: null ,fixed: 'left'},
      ...basePreColumns.slice(1)
    ];
  }
  return basePreColumns;
};

// 生成通用的后置列
const generateAfterColumns = () => {
  return [
    { label: '签到时间', colName: 'signTime', index: 'signTime', width: 160, formatter: null },
    { label: '创建时间', colName: 'createTime', index: 'create_time', width: 160, formatter: null },
    { label: '修改人', colName: 'updator', index: 'updator', width: 80, formatter: null },
    { label: '修改时间', colName: 'updateTime', index: 'update_time', width: 160, formatter: null },
    { label: '身份校验次数', colName: 'verifyIdCardTime', index: 'verify_id_card_time', width: 110, formatter: null },
    { label: '是否是黑名单', colName: 'isBlackList', index: 'is_black_list', width: 110, formatter: null }
  ];
};

// 选择调用列表
const queryList = async (tid: number, isHistory: boolean) => {
  if (tid) {
    if (isHistory) {
      await getHistoryInfo(tid);
    } else {
      await getinfo(tid);
    }

    const includePaymentStatus = tid === 160;
    const preColumns = generatePreColumns(includePaymentStatus);
    const afterColumns = generateAfterColumns();

    columns.value.unshift(...preColumns);
    columns.value.push(...afterColumns);
    await getLys(tid);
    await state.getDataList();
  }
};

// 展会选择框的 change 事件处理函数
const handleTemplateChange = async (tid: number) => {
  const dataToSend = {
    exhibitionId: tid,
    groupId: state.dataForm.gid,
    startTime: state.dataForm.startTime
  };
  emits('sendExhibitionId', dataToSend);

  state.dataForm.tid = tid;
  // 从templates中根据tid获取展会名称
  const selectedTemplate = templates.value.find(t => t.id === tid);
  if (selectedTemplate) {
    state.dataForm.exhibitionName = selectedTemplate.template;
  } else {
    // 处理未找到对应展会的情况，例如清空或设置默认值
    state.dataForm.exhibitionName = "";
  }

  // 将历史展会选择框绑定的数据设为null
  state.dataForm.historyTid = null;
  // 清空其他相关数据（如果有需要）
  state.dataForm.ly = "";
  state.dataForm.gid = "";
  state.dataForm.col1 = "";
  state.dataForm.col2 = "";
  state.dataForm.col3 = "";
  state.dataForm.col15 = "";
  state.dataForm.col55 = "";
  state.dataForm.col56 = "";
  state.dataForm.isSign = "";
  state.dataForm.startTime = "";
  state.dataForm.endTime = "";
  state.dataForm.zhuying = "";
  state.dataForm.caigou = "";
  await queryList(tid, false);
  //state.getDataList();
  isExhibitionSelected.value = !!state.dataForm.tid;
};
// 历史展会选择框的 change 事件处理函数
const handleHistoryTemplateChange = async (tid: number) => {
    emits('sendExhibitionId', tid); // 触发事件并传递展会id
    state.dataForm.tid = tid;
    // 将展会选择框绑定的数据设为null
    state.dataForm.tid2 = null;
    // 清空其他相关数据（如果有需要）
    state.dataForm.ly = "";
    state.dataForm.gid = "";
    state.dataForm.col1 = "";
    state.dataForm.col2 = "";
    state.dataForm.col3 = "";
    state.dataForm.col15 = "";
    state.dataForm.col55 = "";
    state.dataForm.col56 = "";
    state.dataForm.isSign = "";
    state.dataForm.startTime = "";
    state.dataForm.endTime = "";
    state.dataForm.zhuying = "";
    state.dataForm.caigou = "";
    await queryList(tid, true);
};

const columns = ref<any[]>([]);
// 获取展会信息
const getinfo = (tid: number) => {
  return baseService.get("crm/noctemplate/templateCols", { tid }).then((res) => {
    state.dataForm.tid = tid;
    // state.getDataList();
    memberCount(tid);
    memberBmCount(tid);
    memberDcCount(tid);

    const processedData = res.data.filter((item: { is_show: any }) => item.is_show === '1')
      .map((item: { cols_name: any; col_id: any; width: any }) => {
        const width = item.width === null ? '100px' : item.width;
        return {
          ...item,
          label: item.cols_name,
          colName: 'col' + item.col_id,
          width: width,
        };
      });
    columns.value = processedData;
    showSelectionColumn.value = true;
  });
};

// 获取历史展会信息
const getHistoryInfo = (tid: number) => {
  return baseService.get("crm/noctemplate/templateCols", { tid }).then((res) => {
    state.dataForm.historyTid = tid;
    // state.getDataList();
    memberCount(tid);
    memberBmCount(tid);
    memberDcCount(tid);

    const processedData = res.data.filter((item: { is_show: any }) => item.is_show === '1')
      .map((item: { cols_name: any; col_id: any; width: any }) => {
        const width = item.width === null ? '100px' : item.width;
        return {
          ...item,
          label: item.cols_name,
          colName: 'col' + item.col_id,
          width: width,
        };
      });
    columns.value = processedData;
    showSelectionColumn.value = true;
  });
};

const showAuditButton = ref(false);
//展会名称列表
const templates = ref<any[]>([]);
const getTemplates = () => {
  baseService.get('/crm/noctemplate/list', { limit: 300 }).then((res) => {
    if (res.code == 0) {
      //刷新
      templates.value = res.data;
    }
  });
};

// 监听选中的展会 id 的变化
watch(
  () => view.dataForm.tid,
  (newValue) => {
    const numValue = Number(newValue);
    showAuditButton.value = (numValue === 160 || numValue === 2033);
  }
);

//分组列表
const groupList = ref<any[]>([]);
const getGroup = () => {
  baseService.post('/noc/noclygroup/list', { limit: 100 }).then((res) => {
    if (res.code == 0) {
      //刷新
      groupList.value = res.data.list;
    }
  });
};

//历史展会列表
const history = ref<any[]>([]);
const getHistory = () => {
  baseService.get('/crm/noctemplate/listExpireByRole').then((res) => {
    if (res.code == 0) {
      //刷新
      history.value = res.data;
    }
  });
};

/**
 *收藏夹列表
 */
const collectList = ref<any[]>([]);
const getCollectList = () => {
  return baseService.get("/crm/crmdatafavorite/getByStufId").then((res) => {
    collectList.value = res.data;
    if (collectList.value.length > 0) {
      state.dataForm.dfvId = res.data.list;
    }
  });
};

//修改
const update = ref(0);
const UpdateRef = ref<InstanceType<typeof Update> | null>(null); // 明确类型

const UpdateHandle = () => {
  update.value++;
  nextTick(() => {
    if (state.dataListSelections.length > 0) {
      const selectedRow = state.dataListSelections[0];
      const selectedId = selectedRow.id;
      UpdateRef.value?.init(selectedId, state.dataForm, columns.value);
    }
  });
};

//审核
const examine = ref(0);
const examineRef = ref<InstanceType<typeof Examine> | null>(null); // 明确类型

const examineHandle = () => {
  update.value++;
  nextTick(() => {

    let ids: string[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
      ids.push(state.dataListSelections![i].id);
    }
    examineRef.value?.init(ids);

    /*if (state.dataListSelections.length > 0) {
      const selectedRow = state.dataListSelections[0];
      const selectedId = selectedRow.id;
      examineRef.value?.init(selectedId);
    }*/
  });
};


//加入回访弹窗户
const join = ref(0);
const joinOrUpdateRef = ref();
const JoinOrUpdateHandle = (id?: number) => {
  join.value++;
  nextTick(() => {
    let ids: string[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
      ids.push(state.dataListSelections![i].id);
    }
    state.multiple = true;
    state.dataForm.psnIdList = ids;
    state.dataForm.psnIdList = state.dataForm.psnIdList.join(',');
    joinOrUpdateRef.value.init(id, state.dataForm, state.dataForm.checkAll, state.multiple);
  });
};

//移除回访弹窗
const remove = ref(0);
const RemoveOrUpdaeRef = ref();
const RemoveOrUpdateHandle = (id?: number) => {
  remove.value++;
  nextTick(() => {
    let ids: string[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
      ids.push(state.dataListSelections![i].id);
    }
    state.multiple = true;
    state.dataForm.psnIdList = ids;
    state.dataForm.psnIdList = state.dataForm.psnIdList.join(',');
    RemoveOrUpdaeRef.value.init(id, state.dataForm, state.dataForm.checkAll, state.multiple);
  });
};

const getLys = (templateId: number) => {
  baseService.post("noc/nocly/list2?limit=1000&tid=" + templateId + "&gid=" + state.dataForm.gid).then((r) => {
    if (r.code == 0) {
      state.lys = "";
      state.lys = r.data.list;
      if (state.dataForm.ly == null || state.dataForm.ly == "") {
        state.lylist = "";
        for (var i = 0; i < r.data.list.length; i++) {
          state.lylist = state.lylist.concat("," + r.data.list[i].ly)
        }
      } else {
        state.lylist = "";
      }

    }
  });
};

const memberCount = (templateId: number) => {
  baseService.get("/noc/nocmember/memberCount?tid=" + templateId
    + "&ly=" + state.dataForm.ly
    + "&col1=" + state.dataForm.col1
    + "&col2=" + state.dataForm.col2
    + "&col3=" + state.dataForm.col3
    + "&col56=" + state.dataForm.col56
    + "&isSign=" + state.dataForm.isSign
    + "&col55=" + state.dataForm.col55
  )
    .then((res) => {
      //state.total = res.data.total;
      state.signCount = res.data.sign;
    });
};

//报名成功数
const memberBmCount = (templateId: number) => {
  baseService.get("/noc/nocmember/memberBmCount?tid=" + templateId
    + "&ly=" + state.dataForm.ly
    + "&col1=" + state.dataForm.col1
    + "&col2=" + state.dataForm.col2
    + "&col3=" + state.dataForm.col3
    + "&col56=" + state.dataForm.col56
    + "&isSign=" + state.dataForm.isSign
    + "&col55=" + state.dataForm.col55
  )
    .then((res) => {
      state.bmCount = res.data.total;
    });
};

//到场总数
const memberDcCount = (templateId: number) => {
  baseService.get("/noc/nocmember/memberDcCount?tid=" + templateId
    + "&ly=" + state.dataForm.ly
    + "&col1=" + state.dataForm.col1
    + "&col2=" + state.dataForm.col2
    + "&col3=" + state.dataForm.col3
    + "&col56=" + state.dataForm.col56
    + "&isSign=" + state.dataForm.isSign
    + "&col55=" + state.dataForm.col55
  )
    .then((res) => {
      state.dcCount = res.data.total;
    });
};

const queryData = () => {
  // 如果历史展会的historyTid有值，将其赋给tid
  if (state.dataForm.historyTid) {
    state.dataForm.tid = state.dataForm.historyTid;
  }
  if (state.dataForm.tid == 0) {
    ElMessage.error("请选择展会名称");
    return;
  }
  state.getDataList();
  memberCount(state.dataForm.tid);
  memberBmCount(state.dataForm.tid);
  memberDcCount(state.dataForm.tid);
};
const state = reactive({ ...useView(view), ...toRefs(view) });

//页面进入执行
init();

</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
  white-space: nowrap;
}

.el-input {
  width: 150px;
}

.el-select {
  width: 130px;
}

.el-text {
  font-weight: 700;
}
.el-tag {
  height: 20px;
  line-height: 20px;
}
.unselectable {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard syntax */
}
</style>
